<template>
        <el-form :model="adminInfo" ref="adminForm" :rules="rules" class="all">
            <h3>仙灵岛</h3>
            <el-form-item prop="adminName">
                <el-input style="opacity: .5" placeholder="用户名" v-model="adminInfo.adminName"></el-input>
            </el-form-item>
            <el-form-item prop="passWord">
                <el-input style="opacity: .5" type="password" placeholder="密码" v-model="adminInfo.passWord"></el-input>
            </el-form-item>
            <el-form-item>
                <button :loading="$store.state.load" type="primary" @click.prevent="submitForm('adminInfo')" class="btn btn-gradient">
                    前往仙灵岛
                </button>
            </el-form-item>
            <div class="hb" @click="yc"></div>
        </el-form>
</template>

<script>
    export default {
        name: "login",
        data() {
            return {
                adminInfo: {
                    adminName: "",
                    passWord: "",
                },
                rules: {
                    adminName: [
                        {required: true, message: '请输入用户名称', trigger: 'blur'},
                        {min: 2, max: 5, message: '长度在 2 到 5 个字符', trigger: 'blur'}
                    ],
                    passWord: [
                        {required: true, message: '请输入密码', trigger: 'blur'},
                        {min: 4, max: 10, message: '长度在 4 到 10 个字符', trigger: 'blur'}
                    ]
                }
            }
        },
        methods: {
            yc(){
                this.adminInfo.adminName="三秋";
                this.adminInfo.passWord='091400';
                this.$refs.adminForm.validate(() => {
                    this.$store.dispatch('login',this)
                })
            },
            submitForm() {
                this.$refs.adminForm.validate(() => {
                        this.$store.dispatch('login',this)
                })
            }
        },
    }
</script>

<style lang="less" scoped>

    .hb{
        width: 20px;
        height: 20px;
    position:fixed;
        top: 0;right: 0}
    .all {
        //https://i.loli.net/2019/11/17/GAYyzeKsiWjP5qO.jpg
        background-position: center;
        background: url(./assets/1.jpg);
        background-size: 300px 300px;
        width: 250px;
        height: 270px;
        margin: 150px auto;
        padding: 15px;
        border: 2px solid #ccc;
        border-radius: 15px
    }
    .btn {
        width: 200px;
        height: 50px;
        font-weight: 900;
        margin-left: 25px;
        z-index: 10;
        position: relative;
        font-family: Lato, sans-serif;
       font-size: 15px;
        color: black;
        text-decoration: none;
        background-color: white;
        border: transparent;
        outline: transparent;
        cursor: pointer;
        user-select: none;
        white-space: nowrap;
        animation: glow 8s linear infinite;
        opacity: .9;

        &-gradient {
            color: white;
            background: linear-gradient(90deg, #00dbde, #fc00ff, #00dbde);
            background-size: 300%;
            border-radius: 2em;

            &::before {
                position: absolute;
                content: "";
                top: -5px;
                left: -5px;
                bottom: -5px;
                right: -5px;
                z-index: -1;
                background: inherit;
                background-size: inherit;
                border-radius: 4em;
                opacity: 0;
                transition: 0.5s;
            }

            &:hover::before {
                opacity: 1;
                filter: blur(20px);
                animation: glow 8s linear infinite;
            }
        }
    }

    @keyframes glow {
        to {
            background-position: 300%;
        }
    }

    .yhm {
        margin-bottom: 30px
    }
    h3 {
        display: block;
        height: 40px;

        line-height: 40px;
        border-radius: 15px;
        box-shadow: 0 0.3px 0.7px rgba(0, 0, 0, 0.126),
        0 0.9px 1.7px rgba(0, 0, 0, 0.179), 0 1.8px 3.5px rgba(0, 0, 0, 0.224),
        0 3.7px 7.3px rgba(0, 0, 0, 0.277), 0 10px 20px rgba(0, 0, 0, 0.4);
        backdrop-filter: blur(20px);
        transition: 0.5s ease;
        text-align: center;
        font-size: 20px;

    }


</style>